import React, { Component } from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import { Button } from 'bee/components/Buttons';
import { colors, sizes } from 'bee/themes';
import { Header } from 'bee/components/MakePlan';
import PlanBox from 'bee/components/MakePlan/PlanBox';
import { px2dp, request } from 'bee/utils';

// @flow
type Props = {
  close: Function,
};

export default class PlanInfo extends Component<Props> {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      plans: this.props.risks,
    };
  }

  // componentDidMount() {
  //   request('/planinfo')
  //     .then(data => {
  //       this.setState({
  //         name: data.name,
  //         plans: data.plans,
  //       });
  //     })
  //     .catch(e => {
  //       console.error(e);
  //     });
  // }

  render() {
    console.log(this.props);
    const { close } = this.props;
    const { name, plans } = this.state;
    return (
      <View style={styles.container}>
        <Header title={name} close={close} />

        <ScrollView>
          {plans
            ? plans.map((value, index) => <PlanBox info={value} key={index} />)
            : null}
        </ScrollView>
        <View style={styles.btnView}>
          <Button
            containerStyle={styles.btnContainer}
            textStyle={styles.btnText}
            text="确定"
            onPress={close}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: px2dp(860),
    backgroundColor: '#eee',
  },
  btnContainer: {
    width: '100%',
    height: px2dp(80),
    borderRadius: px2dp(10),
    backgroundColor: colors[1001],
  },
  btnText: {
    fontSize: sizes.f3,
    color: colors.white,
  },
  btnView: {
    height: px2dp(100),
    paddingLeft: px2dp(30),
    paddingRight: px2dp(30),
    paddingTop: px2dp(10),
    paddingBottom: px2dp(10),
    borderColor: colors[1104],
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fafafa',
    borderWidth: StyleSheet.hairlineWidth,
  },
});
